<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta
         name="viewport"
         content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      />
      <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
      <!-- 取得是webpack里的变量，也可以往这里去注入变量 -->
      <!-- 通过 html-webpack-plugin 这个插件注入到 index.html之中: 注入 cdn 的变量-->
      <title><%= webpackConfig.name %></title>
      <!-- 这里放置css -->
      <!-- 相当于给了我的html文件里在打包过程中加了一个变量，加了一个cdn变量 
      要引入cdn 的css 跟 js，通过你配置的 CDN Config 依次注入 css 和 js。
      -->
      <!-- 遍历到了属性里的每一个元素，不论你有几个属性，并且形成一个link标签 
      然后它的 href 等于 css的值，这个值就是路径，打包的效果就会引入一个element-ui 的样式
      -->
      <!-- 这是一个默认变量，它的 options 里边 cdn 就是刚才赋值的 cdn  args[0].cdn = cdn
      相当于拿到了刚才定义的这个对象，取得是这个对象中的 css 跟 js，这两个都是数组
      只需要把这个数组循环遍历，把他们的文件全都依次插入到 html 文件
      -->
      <!-- for var of 就是for遍历循环的意思 -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
      <link rel="stylesheet" href="<%=css%>" />
      <% } %>
   </head>
   <body>
      <noscript>
         <strong>
            We're sorry but <%= webpackConfig.name %> doesn't work properly
            without JavaScript enabled. Please enable it to continue.
         </strong>
      </noscript>
      <div id="app"></div>
      <!-- built files will be auto injected -->
      <!-- 放置 js  -->
      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
      <% } %>
   </body>
</html>
